<template>
  <div class="box">
    <div class="movie-tabs">
      <van-tabs
        v-model="active"
        background="#DD403B"
        color="#fff"
        title-active-color="#fff"
        title-inactive-color="#F1B3B1"
        sticky="true"
        offset-top="0px"
        class="movie-list"
      >
        <van-tab title="热映">
          <comp-playmovie :moviesData="movieData"></comp-playmovie>
        </van-tab>
        <van-tab title="影院">
          <comp-playbuy :movieBuy="movieBuy"></comp-playbuy>
          <div>
            <comp-playfilm :cinemas="playfilm"></comp-playfilm>
          </div>
        </van-tab>
        <van-tab title="待映">
          <comp-playnextmovie :movieNext="movieNext"></comp-playnextmovie>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 底部 -->
    <comp-footer></comp-footer>
  </div>
</template>
<script>
import { Tab, Tabs } from "vant";
import CompFooter from "../components/comp-footer.vue";
import searchTxt from "../components/comp-searchtxt.vue";
import compPlaymovie from "../components/comp-playmovie.vue";
import compPlaynextmovie from "../components/comp-playnextmovie.vue";
import compPlaybuy from "../components/comp-playbuy.vue";
import compPlayfilm from "../components/comp-playfilm.vue";

export default {
  name: "Movie",
  data() {
    return {
      active: 0,
      movieData: [], //热
      movieNext: [], //待
      movieBuy: [], //影院
      playfilm: [],
    };
  },
  components: {
    CompFooter,
    searchTxt,
    compPlaymovie,
    compPlaynextmovie,
    compPlaybuy,
    compPlayfilm,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
  },
  methods: {
    getData() {
      this.loadState = false;
      let pro = axios.get("index/moreComingList", {
        params: {
          // ci: 1,
          // limit: 10,
          movieIds:
            "1363244,1331230,1417305,1199023,246968,1236599,1370269,1280799,1285684,1370983",
          // movieIds:
          //   "1280794,1291076,1352665,1298520,1230347,1443761,1355028,1250708,1404730,1397684",
        },
      });
      pro
        .then((res) => {
          setTimeout(() => {
            this.loadState = true;
            // console.log(res);
            this.movieData = res.coming;
          }, 1000);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    getData1() {
      this.loadState = false;
      let pro = axios.get("index/moreComingList", {
        params: {
          // ci: 1,
          // limit: 10,
          // movieIds:
          //   "1363244,1331230,1417305,1199023,246968,1236599,1370269,1280799,1285684,1370983",
          movieIds:
            "1280794,1291076,1352665,1298520,1230347,1443761,1355028,1250708,1404730,1397684",
        },
      });
      pro
        .then((res) => {
          setTimeout(() => {
            this.loadState = true;
            // console.log(res);
            this.movieNext = res.coming;
          }, 1000);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    // 影院  附近影院筛选条件
    getDataMovieBuy() {
      this.loadState = false;
      let pro = axios.get("index/filterCinemas", {
        params: {
          ci: 1,
        },
      });
      pro
        .then((res) => {
          setTimeout(() => {
            this.loadState = true;
            for (let key in res) {
              if (res[key] != null) {
                this.movieBuy.push(res[key]);
              }
              // console.log("n----->", n);
            }
            // console.log("去除null--->", this.movieBuy);
          }, 1000);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    //影院
    getDataMovie() {
      this.loadState = false;
      let pro = axios.get("index/moreCinemas", {
        params: {
          day: "2021-12-21",
          ci: 1,
          offset: 0,
          limit: 10, // 10  20  30  触底加载
          //  districtId:1165
        },
      });
      pro
        .then((res) => {
          //  setTimeout(() => {
          this.loadState = true;
          this.playfilm = res;
          // console.log("购票---->", this.cinemas);
          //  }, 1000);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
  },
  created() {
    this.getData();
    this.getData1();
    this.getDataMovieBuy();
    this.getDataMovie();
    console.log(this.$route.query.num);
    if (this.$route.query.num) {
      this.active = this.$route.query.num;
    }
  },
  mounted() {
    this.$forceUpdate();
  },
};
</script>

<style lang="scss" scoped>
.box {
  //  position: fixed;
  //  z-index: 1;
  width: 100%;
  //  overflow: auto;
}
.movie-tabs {
  // overflow-y: scroll;//或者
  // overflow: auto;
  // margin: 0px;
  width: 100%;
  // height: 100%;
  // position: fixed;
  z-index: 99;
}
.movie-list {
  width: 100%;
  height: 44px;
  // z-index: 99;
}
</style>